<template>
  <div id="forgetPassword">
    <div class="resetForm">
      <!-- 表单内容区域 -->
      <div class="resetFormContent">
        <!-- 第一行：手机号 -->
        <div class="resetFormContentItem_phone">
          <img
            class="phoneNumerImg"
            src="@/assets/images/slider/login_phone.png"
          />

          <div class="phoneNumberInputDiv">
            <span class="helpFont">手机号</span>

            <md-field class="phoneNumerInput">
              <md-input
                @input="phoneNumerInputingInput"
                @blur="phoneNumerInputingBlur"
                v-model="resetForm.phoneNumber"
                placeholder="请输入您的手机号码"
                class="phoneInput"
                maxlength="11"
              ></md-input>
            </md-field>

            <span
              class="message"
              v-if="
                !$v.resetForm.phoneNumber.required &&
                  !isFirstBeforeValidate_phoneNumber
              "
              >请输入您的手机号码</span
            >
            <span
              class="message"
              v-else-if="
                !$v.resetForm.phoneNumber.phoneReg &&
                  !isFirstBeforeValidate_phoneNumber
              "
              >请输入正确的手机号码</span
            >
          </div>
        </div>

        <!-- 第二行：验证码 -->
        <div class="resetFormContentItem_code">
          <img
            class="codeImg"
            src="@/assets/images/slider/login_verificationCode.png"
          />
          <div class="codeInputDiv">
            <span class="helpFont">验证码</span>
            <md-field class="codeInput">
              <md-input
                @input="codeInputingInput"
                @blur="codeInputingBlur"
                v-model.trim="resetForm.verificationCode"
                placeholder="请输入您的手机验证码"
                class="codeIpt"
                maxlength="6"
              ></md-input>
            </md-field>
            <span
              class="message"
              v-if="
                !$v.resetForm.verificationCode.required &&
                  !isFirstBeforeValidate_verificationCode
              "
              >请输入您的手机验证码
            </span>
            <md-button
              :disabled="isCodeBtnDisabled"
              class="sendVerificationCodeBtn"
              @click="sendVerificationCodeBtn"
              >{{ codeBtnContent }}</md-button
            >
          </div>
        </div>

        <!-- 第三行：密码 -->
        <div class="resetFormContentItem_password">
          <img
            class="passwordImg"
            src="@/assets/images/slider/login_verificationCode.png"
          />
          <div class="passwordInputDiv">
            <span class="helpFont">密码</span>
            <md-field class="passwordInput">
              <md-input
                type="password"
                @input="passwordInputingInput"
                @blur="passwordInputingBlur"
                v-model.trim="resetForm.password"
                placeholder="请输入您的新密码"
                class="passwordIpt"
                maxlength="16"
              ></md-input>
            </md-field>
            <span
              class="message"
              v-if="
                !$v.resetForm.password.required &&
                  !isFirstBeforeValidate_password
              "
              >请输入您的新密码
            </span>
            <span class="message" v-else-if="!$v.resetForm.password.minLength"
              >密码长度必须为6-18位
            </span>
            <span
              class="message"
              v-else-if="
                !$v.resetForm.password.maxLength &&
                  !isFirstBeforeValidate_password
              "
              >密码长度必须为6-18位
            </span>
          </div>
        </div>

        <!-- 第四行：重复密码 -->
        <div class="resetFormContentItem_rePassword">
          <img
            class="rePasswordImg"
            src="@/assets/images/slider/login_verificationCode.png"
          />
          <div class="rePasswordInputDiv">
            <span class="helpFont">密码</span>
            <md-field class="rePasswordInput">
              <md-input
                maxlength="16"
                type="password"
                @input="rePasswordInputingInput"
                @blur="rePasswordInputingBlur"
                v-model.trim="resetForm.rePassword"
                placeholder="请确认您的新密码"
                class="rePasswordIpt"
              ></md-input>
            </md-field>
            <span
              class="message"
              v-if="
                !$v.resetForm.rePassword.required &&
                  !isFirstBeforeValidate_rePassword
              "
              >请确认您的新密码
            </span>
            <span
              class="message"
              v-else-if="
                !$v.resetForm.rePassword.sameAsPassword &&
                  !isFirstBeforeValidate_rePassword
              "
              >两次密码必须一致</span
            >
          </div>
        </div>
      </div>

      <!-- 表单提交按钮 -->
      <div class="resetBtnDiv">
        <md-button class="resetBtn" @click="submit">提交</md-button>
      </div>
    </div>
  </div>
</template>

<script>
// vuelidate 用于表单验证
import {
  required,
  minLength,
  maxLength,
  sameAs,
} from "vuelidate/lib/validators";
import { phoneReg } from "../../utils/regular";
import { sendFindpwdVerifyCodeApi, setNewpwdApi } from "@/api";
import { iscode } from "@/utils";

export default {
  name: "ForgetPassword",
  data() {
    return {
      // 表单数据收集
      resetForm: {
        phoneNumber: "",
        verificationCode: "",
        password: "",
        rePassword: "",
      },
      // 是否是第一次进来（刚进来不验证）
      isFirstBeforeValidate_phoneNumber: true,
      isFirstBeforeValidate_verificationCode: true,
      isFirstBeforeValidate_password: true,
      isFirstBeforeValidate_rePassword: true,
      // 验证码按钮是否禁用
      isCodeBtnDisabled: false,
      // 验证码开启计时
      codeBtnCount: 10,
    };
  },
  // vuelidate验证表单
  validations: {
    resetForm: {
      phoneNumber: {
        required,
        phoneReg,
      },
      verificationCode: {
        required,
      },
      password: {
        required,
        minLength: minLength(6),
        maxLength: maxLength(18),
      },
      rePassword: {
        required,
        sameAsPassword: sameAs("password"),
      },
    },
  },
  computed: {
    codeBtnContent() {
      if (this.isCodeBtnDisabled) {
        return "剩余" + this.codeBtnCount + "s";
      } else {
        return "获取验证码";
      }
    },
  },
  methods: {
    // ----- 异步相关方法 -----
    // 获取手机验证码
    async sendVerificationCodeBtn() {
      let result = await sendFindpwdVerifyCodeApi({
        phone: this.resetForm.phoneNumber,
      });
      if (iscode(result)) {
        this.codeBtnCount = 60;
        this.isCodeBtnDisabled = true;
        let timer = setInterval(() => {
          this.codeBtnCount = this.codeBtnCount - 1;
          if (this.codeBtnCount === 0) {
            clearInterval(timer);
          }
        }, 1000);
        setTimeout(() => {
          this.isCodeBtnDisabled = false;
        }, 60000);
      }
    },

    // 找回密码（设置新密码）
    async setNewpwd() {
      let result = await setNewpwdApi({
        phone: this.resetForm.phoneNumber,
        password: this.resetForm.password,
        verify_code: this.resetForm.verificationCode,
      });
      if (iscode(result)) {
        this.$toast({ message: "提交成功", type: "success" });
        // 退出后初始化表单
        this.initFormWithClear();
        // 提交成功跳转到个人中心
        this.$router.push("/login");
      }
    },

    // -----可复用方法-----
    // 用于初始化清空表单残留，同时下次进入变成第一次进入
    initFormWithClear() {
      // 保证每次重新点开没有数据残留
      this.resetForm = {
        phoneNumber: "",
        verificationCode: "",
        password: "",
        rePassword: "",
      };
      // 保持每次重新点开都是第一次进入状态
      this.isFirstBeforeValidate_phoneNumber = true;
      this.isFirstBeforeValidate_verificationCode = true;
      this.isFirstBeforeValidate_password = true;
      this.isFirstBeforeValidate_rePassword = true;
    },

    // ------功能性方法------
    // 提交
    submit() {
      if (!this.$v.$invalid) {
        this.setNewpwd();
      } else {
        this.isFirstBeforeValidate_phoneNumber = false; // 修改成不是第一次进入
        this.isFirstBeforeValidate_verificationCode = false; // 修改成不是第一次进入
        this.isFirstBeforeValidate_password = false; // 修改成不是第一次进入了
        this.isFirstBeforeValidate_rePassword = false; // 修改成不是第一次进入了
        this.$v.resetForm.phoneNumber.$touch();
        this.$v.resetForm.verificationCode.$touch();
        this.$v.resetForm.password.$touch();
        this.$v.resetForm.rePassword.$touch();
      }
    },

    // -----验证相关方法-----
    // 手机输入框失去焦点时触发
    phoneNumerInputingBlur() {
      this.isFirstBeforeValidate_phoneNumber = false; // 修改成不是第一次进入了
      this.$v.resetForm.phoneNumber.$touch();
    },
    // 手机输入框输入时，正则限制只能输入数字
    phoneNumerInputingInput() {
      this.isFirstBeforeValidate_phoneNumber = true; // 在输入的时候让提示不现实，只有失去焦点时才显示验证结果
      this.$nextTick(() => {
        this.resetForm.phoneNumber = this.resetForm.phoneNumber.replace(
          /[^\d]/g,
          ""
        );
      });
    },
    // 验证码输入框失去焦点时触发
    codeInputingBlur() {
      this.isFirstBeforeValidate_verificationCode = false; // 修改成不是第一次进入
      this.$v.resetForm.verificationCode.$touch();
    },
    // 验证码输入框输入时，不现实验证结果
    codeInputingInput() {
      this.isFirstBeforeValidate_verificationCode = true; // 在输入的时候让提示不现实，只有失去焦点时才显示验证结果
    },
    // 密码输入框失去焦点时出发
    passwordInputingBlur() {
      this.isFirstBeforeValidate_password = false; // 修改成不是第一次进入了
      this.$v.resetForm.password.$touch();
    },
    // 密码输入框输入时，不现实验证结果
    passwordInputingInput() {
      this.isFirstBeforeValidate_password = true; // 在输入的时候让提示不现实，只有失去焦点时才显示验证结果
    },
    // 重复密码输入框失去焦点时出发
    rePasswordInputingBlur() {
      this.isFirstBeforeValidate_rePassword = false; // 修改成不是第一次进入了
      this.$v.resetForm.rePassword.$touch();
    },
    // 重复密码输入框输入时，不现实验证结果
    rePasswordInputingInput() {
      this.isFirstBeforeValidate_rePassword = true; // 在输入的时候让提示不现实，只有失去焦点时才显示验证结果
    },
  },
};
</script>

<style lang="less" scoped>
#forgetPassword {
  position: absolute;
  top: 90px;
  bottom: 0;
  width: 100%;

  // >> 登录表单区域
  .resetForm {
    width: 100%;
    padding: 0 50px;
    margin-top: 118px;

    // 表单样式
    .resetFormContent {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      // 表单第一行：手机号
      .resetFormContentItem_phone {
        margin-top: 92px;
        display: flex;
        .phoneNumerImg {
          width: 42px;
          height: 60px;
          margin-top: 17px;
        }

        .phoneNumberInputDiv {
          position: relative;
          width: 100%;
          margin-left: 29px;

          span {
            font-size: 28px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ababab;
          }

          .phoneNumerInput {
            /deep/.phoneInput {
              transform: translateY(-10px);
              font-size: 28px !important;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #495057;
            }
          }

          .message {
            position: absolute;
            bottom: -40px;
            left: 0;
            font-size: 24px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: red;
          }
        }
      }

      // 表单第二行：验证码
      .resetFormContentItem_code {
        margin-top: 96px;
        display: flex;
        .codeImg {
          width: 46px;
          height: 52px;
          margin-top: 17px;
        }

        .codeInputDiv {
          position: relative;
          width: 100%;
          margin-left: 25px;
          font-size: 28px;
          .codeInput {
            /deep/.codeIpt {
              transform: translateY(-10px);
              font-size: 28px !important;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #495057;
            }
          }

          .message {
            position: absolute;
            bottom: -40px;
            left: 0;
            font-size: 24px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: red;
          }
          .sendVerificationCodeBtn {
            position: absolute;
            bottom: -40px;
            right: 0;
            width: 145px;
            height: 50px;
            background: #0b81ef !important;
            border-radius: 5px;
            font-size: 24px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ffffff;
          }
        }
      }

      // 表单第三行：密码
      .resetFormContentItem_password {
        margin-top: 92px;
        display: flex;
        .passwordImg {
          width: 46px;
          height: 52px;
          margin-top: 17px;
        }

        .passwordInputDiv {
          position: relative;
          width: 100%;
          margin-left: 29px;

          span {
            font-size: 28px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ababab;
          }

          .passwordInput {
            /deep/.passwordIpt {
              transform: translateY(-10px);
              font-size: 28px !important;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #495057;
            }
          }

          .message {
            position: absolute;
            bottom: -40px;
            left: 0;
            font-size: 24px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: red;
          }
        }
      }

      // 表单第四行：重复密码
      .resetFormContentItem_rePassword {
        margin-top: 92px;
        display: flex;
        .rePasswordImg {
          width: 46px;
          height: 52px;
          margin-top: 17px;
        }

        .rePasswordInputDiv {
          position: relative;
          width: 100%;
          margin-left: 29px;

          span {
            font-size: 28px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ababab;
          }

          .rePasswordInput {
            /deep/.rePasswordIpt {
              transform: translateY(-10px);
              font-size: 28px !important;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #495057;
            }
          }

          .message {
            position: absolute;
            bottom: -40px;
            left: 0;
            font-size: 24px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: red;
          }
        }
      }
    }

    // 注册按钮样式
    .resetBtnDiv {
      margin-top: 77px;
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: center;

      .resetBtn {
        margin: 0;
        width: 250px;
        height: 65px;
        border-radius: 33px;
        background-color: #0b81ef !important;
        font-size: 30px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
      }
    }

    // placeholder的字体颜色
    /deep/.phoneInput::placeholder {
      font-size: 24px;
      color: #495057 !important;
    }
    /deep/.codeIpt::placeholder {
      font-size: 24px;
      color: #495057 !important;
    }
    /deep/.passwordIpt::placeholder {
      font-size: 24px;
      color: #495057 !important;
    }
    /deep/.rePasswordIpt::placeholder {
      font-size: 24px;
      color: #495057 !important;
    }

    // 隐藏限制文字
    /deep/.md-count {
      display: none;
    }
  }
}
</style>
